<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
	<link rel="shortcut icon" href="logo.ico">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="libs/bootstrap-5/css/bootstrap.css">
	<link rel="stylesheet" href="css/login.css">
	<script src="libs/jquery.min.js"></script>
	<link rel="stylesheet" href="fonts/iconfont.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

	<link rel="stylesheet" href="css/slidercaptcha.css">
	<script src="js/longbow.slidercaptcha.js"></script>
	<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">
	<style>

		body{
			position: relative;
		}
		.verify{
			z-index: 999;
			position: absolute;
			left: 50%;
			top:50%;
			transform:translateX(-50%)translateY(-50%);
		}
		.slidercaptcha {
			margin: 0 auto;
			width: 314px;
			height: 286px;
			border-radius: 4px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
			margin-top: 40px;
		}

		.slidercaptcha .card-body {
			padding: 1rem;
		}

		.slidercaptcha canvas:first-child {
			border-radius: 4px;
			border: 1px solid #e6e8eb;
		}

		.slidercaptcha.card .card-header {
			background-image: none;
			background-color: rgba(0, 0, 0, 0.1);
		}

		.refreshIcon {
			top: -54px;
		}
	</style>
</head>
<body>
    <div class="container right-panel-active">
		<!-- login -->
		<div class="containerForm container_login">
			<form action="loginByUsername.user" class="form form-floating mb-3" id="form1" method="post">
				<h2 class="formTitle">账号密码登录</h2>
				<span>
					<label for="login_username">
						<i class="iconfont icon-zhanghao"></i>
					</label>
					<input type="text" placeholder="请输入您的账号" name="username" class="input" id="login_username"/></span> 
				<span>
					<label for="login_password">
						<i class="iconfont icon-mima"></i>
					</label>
					<input type="password" placeholder="请输入您的密码" name="pwd" class="input" id="login_password"/></span>
				<span class="forgetPwd">
						<div class="forgetPwdTit"><a href="#" class="link">忘记密码?</a></div>
						<div>没有账号？<a href="regist.html" class="link">点击注册</a></div>
					</span>
				<span class="protocol-check">
						<input type="checkbox">
						<div>同意环球鞋网</div>
						<a href="#">《用户协议》</a>
						<div>和</div>
						<a href="#">《隐私协议》</a>
				</span>
				<span class="recommend" style="display: none;">
					<div class="recommend-border"></div>
					<div class="recommend-text">请阅读并勾选上方协议</div>
				</span>
				<button class="btn" id="login-btn">登录</button>
			</form>
		</div>
	
		<!--phologin-->
		<div class="containerForm container_phologin">
			<form action="loginByTel.user" class="form" id="form2">
				<h2 class="formTitle">手机号登录</h2>
				<span>
					<label for="login_phone">
						<i class="iconfont icon-shouji"></i>
					</label>
					<input type="text" placeholder="请输入您的手机号" class="input" id="login_phone"/>
				</span>
				<span id="verify_parent">
					<label for="login_verify">
						<i class="iconfont icon-mima
						"></i>
					</label>
					<input type="password" placeholder="请输入您的密码" class="input" id="login_verify"/>
				</span>
				<span class="protocol-check-tel">
						<input type="checkbox">
						<div>同意环球鞋网</div>
						<a href="#">《用户协议》</a>
						<div>和</div>
						<a href="#">《隐私协议》</a>
				</span>
				<span class="recommend-tel" style="display: none;">
					<div class="recommend-border"></div>
					<div class="recommend-text">请阅读并勾选上方协议</div>
				</span>
				<button class="btn" id="tel-login-btn">登录</button>
			</form>
		</div>
	
		<!-- Overlay -->
		<div class="container_overlay">
			<div class="overlay">
				<div class="overlay_panel overlay_left">
					<button class="btn" id="phologin">前往手机号登录</button>
				</div>
				<div class="overlay_panel overlay_right">
					<button class="btn" id="login">前往用户名登录</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 弹出框-->
	<div class="position-absolute top-0 mt-5 w-100" style="z-index: 11">
		<div id="liveToast" class="toast mx-auto" data-bs-delay="6000" role="alert" aria-live="assertive" aria-atomic="true">
			<div class="toast-header">
				<strong class="me-auto">&nbsp登录错误</strong>
				<small>0秒前</small>
				<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
			</div>
			<div class="toast-body">
				出错啦!
			</div>
		</div>
	</div>
	<!--倒计时-->
	<div class="count-downdcontainer" style="display: none">
		<div class="count-down">
			<div class="count-down-text">
				<div>5</div>
			</div>
			<div class="flex-container">
				<div class="outbox">
				</div>
				<svg class="svg">
					<circle id="cls" class="cls run-anim" cx="130" cy="130" r="125"></circle>
				</svg>
			</div>
		</div>
	</div>

    <!-- 验证码 -->
	<div class="verify" style="display: none">
		<div class="container-fluid">
			<div class="form-row">
				<div class="col-12">
					<div class="slidercaptcha card">
						<div class="card-header">
							<span>请完成安全验证</span>
						</div>
						<div class="card-body">
							<div id="captcha"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="libs/bootstrap-5/js/bootstrap.bundle.js"></script>
<script src="js/justvalidate/just-validate.production.min.js"></script>
<script>
	$(function (){
		//滑动部分
		const registBtn = document.querySelector("#phologin");
		const loginBtn = document.querySelector("#login");
		const container = document.querySelector(".container");
		registBtn.addEventListener("click", () => {
			container.classList.remove("right-panel-active");
		});
		loginBtn.addEventListener("click", () => {
			container.classList.add("right-panel-active");
		});
//消除打开页面注册显示功能
		let container_phologin = document.querySelector('.container_phologin');
		setTimeout(function(){
			container_phologin.style.display = 'block';
			container.classList.add("right-panel-active");
		},500)


		// 实例化validate对象
		const validation = new JustValidate('#form1', {
			errorFieldCssClass: 'is-invalid',
			errorLabelStyle: {
				fontSize: '14px',
				color: '#dc3545',
				float:'left'
			},
			successFieldCssClass: 'is-valid',
			successLabelStyle: {
				fontSize: '14px',
				color: '#20b418',
				float:'left'
			},
			focusInvalidField: true,
			lockForm: true,
		});
		//为属性添加校验规则
		validation.addField(
				'#login_username',
				[
					{
						rule: 'required',
						errorMessage: '用户名必须填写！',
					},
				]
		).addField(
				'#login_password',
				[
					{
						rule: 'required',
						errorMessage: '密码必须填写！',
					},
					{
						rule: 'minLength',
						value: 6,
						errorMessage: '密码长度不小于6位！',
					},
				]
		).onSuccess((ev) => {
			//阻值表单的默认行为
			ev.preventDefault();
			//协议验证
			if ($(".protocol-check input").prop("checked") === false) {
				$(".recommend").css("display", "block");
				$(".protocol-check input").addClass("animate__animated animate__wobble");
			} else {
				$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"rgb(232, 232, 232)"});
				$(".verify").css("display","block");
				$('#captcha').sliderCaptcha({
					repeatIcon: 'fa fa-redo',
					onSuccess: function () {
						//如果通过验证,执行fetch请求
						let username = document.querySelector("#login_username").value;
						let pwd = document.querySelector("#login_password").value;
						let formData = new FormData();
						formData.append("username", username);
						formData.append("pwd", pwd);
						fetch("loginByUsername.user", {
							method: "POST",
							body: formData
						}).then(response => response.json()).then(data => {
							console.log(data);
							if (data.flag) {    //登录成功
								//隐藏验证图
								$(".verify").css("display","none");
								//跳转到index.html , 需要将用户信息存储到sessionStorage里
								let userInfo = data.data;
								sessionStorage.setItem("shopping.userInfo", JSON.stringify(userInfo));
								//倒计时跳转
								$(".count-downdcontainer").css("display","block");
								$(".count-down-text").css("display","block");
								$("body").css({"opacity":"0.3"},{"background-color":"#ccc"});
								$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"#ccc"});
								let circle = document.getElementById('cls');
								let total = 5;
								let count = 4;
								let intervalNumber = setInterval(function (){
									$(".count-down-text div").text(`${count}`);
									count--;
									if(count==0){clearInterval(intervalNumber)}
								},1000);


								circle.style.strokeDashoffset = "800";
								circle.style.animationDuration = total + "s";
								circle.style.animationPlayState = "running";
								set(1000 * total);
								circle.classList.add("run-anim");

								function set(total) {
									let interval = setInterval(ret, total);
									function ret() {
										circle.classList.remove("run-anim");
										void circle.offsetWidth;
										clearInterval(interval);
										//跳转页面
										location.href = "index.html";
									}
								}
							} else {
								//展示错误信息
								console.log(data.message);
								startActive();
								var liveToast = document.getElementById('liveToast');
								var myToast = bootstrap.Toast.getOrCreateInstance(liveToast); // Returns a Bootstrap toast instance
								myToast.show();
								//替换内容
								let toastBody = document.querySelector("#liveToast .toast-body");
								toastBody.innerHTML = data.message;
								let count = 0;
								let startTime = new Date().getTime();
								let interval = setInterval(() => {
									if (new Date().getTime() - startTime > 8000) {
										clearInterval(interval);
										return;
									} else {
										$(".toast-header small").text(`${count}秒前`);
										count++;
									}
								}, 1000);
								$("#form1 span").children("input").on("focus", function () {
									clearActive();
								})
							}
						})
					}
				});
			}
		})
		$(".protocol-check input").on("change",()=>{
			if ($(".protocol-check input").prop("checked") === true) {
				$(".recommend").css("display", "none");
				$(".protocol-check input").removeClass("animate__animated animate__wobble");
			}
		})
		$(".protocol-check-tel input").on("change",()=>{
			if ($(".protocol-check-tel input").prop("checked") === true) {
				$(".recommend-tel").css("display", "none");
				$(".protocol-check-tel input").removeClass("animate__animated animate__wobble");
			}
		})
		function startActive(){
			$("#form1 span").eq(0).addClass("span-invalid");
			$("#form1 span").eq(1).addClass("span-invalid");
			$("#form1 span").children("input").eq(0).addClass("input-invalid");
			$("#form1 span").children("input").eq(1).addClass("input-invalid");
		}
		function clearActive(){
			$("#form1 span").eq(0).removeClass("span-invalid");
			$("#form1 span").eq(1).removeClass("span-invalid");
			$("#form1 span").children("input").eq(0).removeClass("input-invalid");
			$("#form1 span").children("input").eq(1).removeClass("input-invalid");
		}


		//实现手机号登录
		// 实例化validate对象
		const validation2 = new JustValidate('#form2', {
			errorFieldCssClass: 'is-invalid',
			errorLabelStyle: {
				fontSize: '14px',
				color: '#dc3545',
				float:'left'
			},
			successFieldCssClass: 'is-valid',
			successLabelStyle: {
				fontSize: '14px',
				color: '#20b418',
				float:'left'
			},
			focusInvalidField: true,
			lockForm: true,
		});
		//为属性添加校验规则
		validation2.addField(
				'#login_phone',
				[
					{
						rule: 'required',
						errorMessage: '手机号必须填写！',
					}
				]
		).addField(
				'#login_verify',
				[
					{
						rule: 'required',
						errorMessage: '密码必须填写！',
					},
					{
						rule: 'minLength',
						value: 6,
						errorMessage: '密码长度不小于6位！',
					},
				]
		).onSuccess((ev) => {
			//阻值表单的默认行为
			ev.preventDefault();
			//协议验证
			if ($(".protocol-check-tel input").prop("checked") === false) {
				$(".recommend-tel").css("display", "block");
				$(".protocol-check-tel input").addClass("animate__animated animate__wobble");
			} else {
				$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"rgb(232, 232, 232)"});
				//阻值表单的默认行为
				ev.preventDefault();
				$(".verify").css("display","block");
				console.log(1)
				$('#captcha').sliderCaptcha({
					repeatIcon: 'fa fa-redo',
					onSuccess: function () {
						console.log(2)
						//如果通过验证,执行fetch请求
						let tel = document.querySelector("#login_phone").value;
						let password = document.querySelector("#login_verify").value;
						let formData2 = new FormData();
						formData2.append("tel", tel);
						formData2.append("pwd",password);
						fetch(`loginByTel.user?tel=${tel}&pwd=${password}`, {
							method: "POST",
							body: formData2
						}).then(response => response.json()).then(data => {
							console.log(data);
							if (data.flag) {
								//登录成功
								//跳转到index.html , 需要将用户信息存储到sessionStorage里
								$(".recommend-tel").css("display", "none");
								let userInfo = data.data;
								sessionStorage.setItem("shopping.userInfo", JSON.stringify(userInfo));
								//倒计时跳转
								$(".count-downdcontainer").css("display","block");
								$(".count-down-text").css("display","block");
								$("body").css({"opacity":"0.3"},{"background-color":"#ccc"});
								$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"#ccc"});
								let circle = document.getElementById('cls');
								let total = 5;
								let count = 4;
								let intervalNumber = setInterval(function (){
									$(".count-down-text div").text(`${count}`);
									count--;
									if(count==0){clearInterval(intervalNumber)}
								},1000);


								circle.style.strokeDashoffset = "800";
								circle.style.animationDuration = total + "s";
								circle.style.animationPlayState = "running";
								set(1000 * total);
								circle.classList.add("run-anim");

								function set(total) {
									let interval = setInterval(ret, total);
									function ret() {
										circle.classList.remove("run-anim");
										void circle.offsetWidth;
										clearInterval(interval);
										//跳转页面
										location.href = "index.html";
									}
								}
							} else {
								//展示错误信息
								console.log(data.message);
								var liveToast = document.getElementById('liveToast');
								var myToast = bootstrap.Toast.getOrCreateInstance(liveToast);
								myToast.show();
								//替换内容
								let toastBody = document.querySelector("#liveToast .toast-body");
								toastBody.innerHTML = data.message;
								let count = 0;
								let startTime = new Date().getTime();
								let interval = setInterval(() => {
									if (new Date().getTime() - startTime > 8000) {
										clearInterval(interval);
										return;
									} else {
										$(".toast-header small").text(`${count}秒前`);
										count++;
									}
								}, 1000);
								$("#form1 span").children("input").on("focus", function () {
									clearActive();
								})
							}

						})
					}
				})
			}
		})
	})
</script>
<!--<script src="js/login.js"></script>-->
</html>